<template>
	<div class="wrapper">
		<div class="dis">
			<div class="main">
				<div class="dis settle">
					结算信息
				</div>
				<div class="line">

				</div>
				<div class="card">
					<van-field v-model="bankCardNo" label="卡号" placeholder="请输入结算卡号" :border="false" @blur="getCard" />
					<van-field v-model="bankCardName" label="开户行" placeholder="请输入开户行" :border="false" :disabled="true"
						class="deposit" />
					<van-field v-model="bankCardPhone" label="手机号" placeholder="请输入银行预留手机号" :border="false" />
				</div>
			</div>
		</div>
		<div class="dis">
			<button class="dis btn" @click="submit">提交变更</button>
		</div>
	</div>
</template>

<script>
	import {
		getCardBin,
		updateBankCardNo
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const state = reactive({
				bankCardNo: '',
				bankCardName: '',
				bankCardPhone: '',
			})
			//提交变更结算卡信息
			const submit = () => {
				if(state.bankCardNo.length<6){
					showToast('请输入结算卡卡号')
					return
				}
				updateBankCardNo({
					bankCardNo: state.bankCardNo,
					bankCardName: state.bankCardName,
					bankCardPhone: state.bankCardPhone,
				}).then(res => {
					showToast('结算卡变更成功')
					setTimeout(()=>{
						router.go(-1)
					},2000)
					
				})
			}
			//获取卡开户行
			const getCard = () => {
				
				if(state.bankCardNo.length>6){
					getCardBin({
						cardNo: state.bankCardNo,
					}).then(res => {
						if(res.data==null){
							showToast('当前卡不支持')
						}else{
							state.bankCardName = res.data.issnam
						}
					})
				}else{
					showToast('请输入结算卡卡号')
				}
			}

			return {
				...toRefs(state),
				getCard,
				submit
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		background-color: #fff;
		height: 100%;
		min-height: 100vh;

		.main {
			width: 339px;
			// height: 160px;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.26);
			border-radius: 6px;
			padding: 11px 11px 4px 11px;
			box-sizing: border-box;
			margin-top: 12px;

			.settle {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #869FFE;
			}

			.line {
				width: 318px;
				border-bottom: 1px solid #f3f3f3;
				margin-top: 11px;
			}

			.card {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;

			}
		}
	}

	.btn {
		width: 339px;
		height: 41px;
		background: #0257FF;
		border-radius: 6px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
		margin-top: 51px;
	}

	::v-deep .van-cell {
		padding: 6px 10px;
	}

	::v-deep .van-field__label {
		color: #323233;
	}

	// ::v-deep .van-field__control:disabled{
	// 	color: #323233;
	// 	-webkit-text-fill-color:#323233;
	// }
</style>